<template>
	<div class="wrapper">
		<div class="top">
			<div class="top__bgcor"></div>
			<div class="top__header">
				<div class="iconfont top__header__back" @click="handleBack">&#xe6f2;</div>
				确认订单
			</div>
			<div class="top__receiver">
				<div class="top__receiver__title">收货地址</div>
				<div class="top__receiver__address">北京理工大学国防科技园2号楼10层</div>
				<div class="top__receiver__info">
					<span class="top__receiver__info__name">张三（先生）</span>
					<span class="top__receiver__info__name">13456893503</span>
				</div>
				<div class="iconfont top__receiver__icon">&#xe6f2;</div>
			</div>
		</div>
		<div class="products">
			<div class="products__title">{{shopName}}</div>
			<div class="products__wrapper">
				<div class="products__list">
					<template v-for="item of productList" :key="item._id">
						<div v-if="item.count > 0">
							<div class="products__item">
								<img class="products__item__img" :src="item.imgUrl" alt="img" />
								<div class="products__item__detail">
									<h4 class="products__item__title">{{item.name}}</h4>
									<p class="products__item__price">
										<span class="products__item__single">
											<span class="product__item__yen">
												&yen;{{item.price}} x {{item.count}}
											</span>
										</span>
										<span class="products__item__total">
											<span class="products__item__yen">
												&yen;{{(item.price * item.count).toFixed(2)}}
											</span>
										</span>
									</p>
								</div>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="order">
			<div class="order__price">
				实付金额：
				<span class="order__price__all">&yen;{{calculations.price}}</span>
			</div>
			<div
				class="order__btn"
				v-show="calculations.total > 0"
				@click="() => showOrderToast(true)"
			>
			提交订单
			</div>
		</div>
		<div class="mask" v-show="visible" @click="() => showOrderToast(false)">
			<div class="mask__content" @click.stop>
				<h3 class="mask__content__title">确认要离开收银台？</h3>
				<p class="mask__content__desc">请尽快完成支付，否则将被取消</p>
				<div class="mask__content__btns">
					<div
						class="mask__content__btn mask__content__btn--first"
						@click="() => handleOrder(true)"
					>取消订单</div>
					<div
						class="mask__content__btn mask__content__btn--last"
						@click="() => handleOrder(false)"
					>确认支付</div>
				</div>
			</div>
		</div>
		<Toast :show="show" :text="text" />
	</div>
</template>

<script>
	import { defineComponent, ref, computed } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { useStore } from 'vuex'
	import { post } from '../../utils/request'
	import Toast, { useToastEffect } from '../../components/Toast'

	const ERR_OK = 0

	export default defineComponent({
		name: 'Order',
		components: { Toast },
		setup() {
			const store = useStore()
			const route = useRoute()
			const router = useRouter()
			const shopId = route.params.id
			const { cartList } = store.state
			const visible = ref(false)
			const productList = computed(() => {
				const productList = cartList[shopId]?.productList || {}
				return productList
			})
			const shopName = computed(() => {
				const shopName = cartList[shopId]?.shopName || ''
				return shopName
			})
			const calculations = computed(() => {
				const result = { total: 0, price: 0, checkedAll: true }
				const productList = cartList[shopId]?.productList
				if (productList) {
					for (const key in productList) {
						result.total += productList[key].count
						if (productList[key].checked) {
							result.price += productList[key].count * productList[key].price
						}
						if (!productList[key].checked && productList[key].count > 0) {
							result.checkedAll = false
						}
					}
				}
				result.price = (result.price).toFixed(2)
				return result
			})
			const products = []
			for (const k in productList.value) {
				const product = productList.value[k]
				if (product.count > 0) {
					products.push({
						id: product._id,
						num: product.count
					})
				}
			}
			const { show, text, showToast } = useToastEffect()
			const handleBack = () => {
				router.back()
			}
			const handleOrder = async(flag) => {
				try {
					const result = await post('/api/order', {
						addressId: 1,
						shopId,
						shopName: shopName.value,
						isCanceled: flag,
						products
					})
					if (result.errno === ERR_OK) {
						showToast('订单处理成功')
						setTimeout(() => {
							router.push('/orderList')
							store.commit('clearCart', { shopId })
						}, 2e3)
			        } else {
			            showToast('订单处理失败')
			        }
			        visible.value = false
				} catch (e) {
					showToast('未知的错误')
					throw new Error('Unexpected Error: ' + JSON.stringify(e))
				}
			}
			const showOrderToast = (flag) => {
				visible.value = flag
			}
			return {
				show,
				text,
				visible,
				shopName,
				productList,
				calculations,
				handleBack,
				handleOrder,
				showOrderToast
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../style/variable.scss';
	@import '../../style/mixins.scss';

	.wrapper {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #eee;
		overflow-y: scroll;
	}
	.top {
		position: relative;
		height: 1.96rem;
		background-size: 100% 1.59rem;
		background-image: linear-gradient(0deg, rgba(0, 145, 222, 0) 4%, #0091ff 50%);
		background-repeat: no-repeat;
		&__header {
			position: relative;
			padding-top: .26rem;
			line-height: .24rem;
			color: #fff;
			text-align: center;
			font-size: .16rem;
			&__back {
				position: absolute;
				left: .18rem;
				font-size: .22rem;
			}
		}
		&__receiver {
			position: absolute;
			left: .18rem;
			right: .18rem;
			bottom: 0;
			height: 1.11rem;
			background: #fff;
			border-radius: .04rem;
			&__title {
				line-height: .22rem;
				padding: .16rem 0 .14rem .16rem;
				font-size: .16rem;
				color: $content-font-color;
			}
			&__address {
				line-height: .2rem;
				padding: 0 .4rem 0 .16rem;
				font-size: .14rem;
				color: $content-font-color;
			}
			&__info {
				padding: .06rem 0 0 .16rem;
				&__name {
					line-height: .18rem;
					margin-right: .06rem;
					font-size: .12rem;
					color: #666;
				}
			}
			&__icon {
				position: absolute;
				right: .16rem;
				top: .5rem;
				font-size: .2rem;
				color: #666;
				transform: rotate(180deg);
			}
		}
	}
	.products {
		margin: .16rem .18rem .1rem .18rem;
		padding-top: .02rem;
		&__wrapper {
			position: absolute;
			left: 0;
			right: 0;
			bottom: .6rem;
			top: 2.44rem;
			overflow-y: scroll;
			margin: 0 .18rem;
		}
		&__list {
			background-color: #fff;
		}
		&__title {
			padding: .12rem 0;
			font-size: .16rem;
			color: $content-font-color;
			text-indent: .12rem;
			background-color: #fff;
		}
		&__item {
			position: relative;
			display: flex;
			padding: .16rem;
			border-bottom: .01rem solid #f1f1f1;
			&__detail {
				flex: 1;
			}
			&__img {
				width: .46rem;
				height: .46rem;
				margin-right: .16rem;
			}
			&__title {
				margin: 0;
				line-height: .2rem;
				font-size: .14rem;
				color: $content-font-color;
				@include ellipsis;
			}
			&__sales {
				margin: .06rem 0;
				line-height: .16rem;
				font-size: .12rem;
				color: $content-font-color;
			}
			&__price {
				display: flex;
				margin: .06rem 0 0 0;
				line-height: .2rem;
				font-size: .14rem;
				color: $highlight-fontColor;
			}
			&__total {
				flex: 1;
				text-align: right;
				color: #000;
			}
			&__yen {
				font-size: .16rem;
				margin-right: .1rem;
			}
		}
	}
	.order {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		height: .49rem;
		line-height: .49rem;
		background-color: #fff;
		&__price {
			flex: 1;
			text-indent: .24rem;
			color: $content-font-color;
			font-size: .14rem;
			&__all {
				color: $highlight-fontColor;
				font-weight: bold;
				font-size: .16rem;
			}
		}
		&__btn {
			width: .98rem;
			background-color: #4fb0f9;
			color: #fff;
			text-align: center;
			font-size: .14rem;
		}
	}
	.mask {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		text-align: center;
		background-color: rgba(0, 0, 0, .5);
		&__content {
			width: 3rem;
			height: 1.56rem;
			background-color: #fff;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: .04rem;
			&__title {
				margin: .24rem 0 0 0;
				line-height: .26rem;
				font-size: .18rem;
				color: $content-font-color;
			}
			&__desc {
				margin: .08rem 0 0 0;
				font-size: .14rem;
				color: #666;
			}
			&__btns {
				display: flex;
				margin: .24rem .58rem;
			}
			&__btn {
				flex: 1;
				width: .8rem;
				line-height: .32rem;
				border: .01rem solid #4fb0f9;
				border-radius: .16rem;
				&--first {
					margin-right: .12rem;
					color: #4fb0f9;
				}
				&--last {
					margin-left: .12rem;
					background-color: #4fb0f9;
					color: #fff;
				}
			}
		}
	}
</style>
